<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预约管理 - 疫苗预约系统</title>
    <link rel="stylesheet" href="../css/common.css?v=20251119">
    <style>
        .calendar-wrapper {
            display: grid;
            grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr);
            gap: 24px;
        }
        .calendar-card { padding: 0; overflow: hidden; }
        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px 10px;
        }
        .calendar-nav { display: flex; gap: 10px; }
        .calendar-nav button {
            border: 1px solid var(--border-color);
            background: white;
            border-radius: 6px;
            padding: 6px 10px;
            cursor: pointer;
        }
        .calendar-nav button:hover {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        .calendar-weekdays {
            display: grid;
            grid-template-columns: repeat(7, minmax(0, 1fr));
            padding: 0 24px 8px 24px;
            gap: 8px;
        }
        .calendar-weekday {
            text-align: center;
            font-weight: 600;
            color: var(--text-muted);
        }
        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, minmax(0, 1fr));
            padding: 0 24px 24px;
            gap: 10px;
        }
        .calendar-day {
            min-height: 90px;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 10px;
            background: white;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            transition: all 0.2s ease;
        }
        .calendar-day:hover:not(.calendar-empty) {
            transform: translateY(-2px);
            box-shadow: 0 6px 14px rgba(0,0,0,0.08);
        }
        .calendar-day.has-appointments {
            border: 2px solid #ff6b6b;
            background: radial-gradient(circle at top, rgba(255,107,107,0.12), rgba(255,255,255,0));
        }
        .calendar-day.selected {
            border: 2px solid var(--primary-color);
            box-shadow: 0 8px 16px rgba(17,165,187,0.25);
        }
        .calendar-day-number { font-weight: 600; font-size: 16px; }
        .calendar-day-count { font-size: 13px; text-align: right; color: #ff6b6b; font-weight: 600; }
        .calendar-day-dot {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #ff6b6b;
        }
        .calendar-empty { border: none; background: transparent; cursor: default; }
        @media (max-width: 992px) {
            .calendar-wrapper { grid-template-columns: 1fr; }
            .calendar-weekdays, .calendar-grid { padding: 0 16px 16px; }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="main-container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="sidebar-header">
                <i class="fas fa-syringe"></i>
                <h2>疫苗预约系统</h2>
                <p>接种点管理员</p>
            </div>
            <nav class="sidebar-menu">
                <a href="home.html" class="menu-item">
                    <i class="fas fa-home"></i>
                    <span>首页</span>
                </a>
                <a href="inventory.html" class="menu-item">
                    <i class="fas fa-boxes"></i>
                    <span>库存管理</span>
                </a>
                <a href="appointment.html" class="menu-item active">
                    <i class="fas fa-calendar-check"></i>
                    <span>预约管理</span>
                </a>
                <a href="statistics.html" class="menu-item">
                    <i class="fas fa-chart-bar"></i>
                    <span>数据统计</span>
                </a>
            </nav>
        </div>

        <!-- 主内容区域 -->
        <div class="main-content" id="mainContent">
            <!-- 低库存预警提示条 -->
            <div class="low-stock-alert-bar" id="lowStockAlertBar">
                <div class="low-stock-alert-content">
                    <i class="fas fa-exclamation-triangle low-stock-alert-icon"></i>
                    <span class="low-stock-alert-text" id="lowStockAlertText">检测到低库存预警，请及时补充库存</span>
                </div>
                <button class="low-stock-alert-close" onclick="closeLowStockAlert()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <!-- 顶部导航栏 -->
            <div class="top-navbar">
                <div class="navbar-left">
                    <h1>预约管理</h1>
                </div>
                <div class="navbar-right">
                    <div class="user-info">
                        <div class="user-avatar" id="userAvatar">A</div>
                        <span class="user-name" id="userName">管理员</span>
                    </div>
                    <button class="btn-logout" onclick="handleLogout()">
                        <i class="fas fa-sign-out-alt"></i> 退出登录
                    </button>
                </div>
            </div>

            <!-- 内容区域 -->
            <div class="content-area">
                <!-- 页面标题 -->
                <div class="page-header">
                    <h2 class="page-title">预约管理</h2>
                    <p class="page-subtitle">按月份查看各天预约情况</p>
                </div>

                <!-- 统计卡片 -->
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-icon primary">
                            <i class="fas fa-calendar-day"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="totalAppointments">0</h3>
                            <p>今日预约总数</p>
                        </div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-icon warning">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="pendingAppointments">0</h3>
                            <p>待接种</p>
                        </div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-icon success">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="completedAppointments">0</h3>
                            <p>已完成</p>
                        </div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-icon danger">
                            <i class="fas fa-times-circle"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="cancelledAppointments">0</h3>
                            <p>已取消</p>
                        </div>
                    </div>
                </div>

                <div class="calendar-wrapper">
                    <div class="card calendar-card">
                        <div class="calendar-header">
                            <div>
                                <h3 id="calendarMonthLabel">2025年11月</h3>
                                <p class="page-subtitle">有预约的日期会以红色标记</p>
                            </div>
                            <div class="calendar-nav">
                                <button onclick="changeMonth(-1)">
                                    <i class="fas fa-chevron-left"></i>
                                </button>
                                <button onclick="changeMonth(1)">
                                    <i class="fas fa-chevron-right"></i>
                                </button>
                            </div>
                        </div>
                        <div class="calendar-weekdays" id="calendarWeekdays"></div>
                        <div class="calendar-grid" id="calendarGrid"></div>
                    </div>

                    <div class="card">
                        <div class="calendar-detail-header">
                            <div>
                                <div class="calendar-detail-date" id="selectedDateLabel">请选择日期</div>
                                <p class="page-subtitle" id="selectedDateSummary">点击红色日期查看当日预约</p>
                            </div>
                            <button class="btn btn-secondary btn-sm" onclick="refreshSelectedDate()">
                                <i class="fas fa-sync"></i> 刷新
                            </button>
                        </div>
                        <div class="table-container">
                            <table>
                                <thead>
                                    <tr>
                                        <th>预约ID</th>
                                        <th>预约人</th>
                                        <th>疫苗名称</th>
                                        <th>疫苗类型</th>
                                        <th>预约时间</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="appointmentTableBody">
                                    <tr>
                                        <td colspan="7" style="text-align: center; padding: 40px; color: #999;">
                                            请选择日期
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="../js/common.js?v=20251120_3"></script>
    <script src="js/appointment.js?v=20251120_2"></script>
</body>
</html>

